Update Docs Embed with new styling and tabs #3823
Open
+996
−235
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: ea61a93 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
zenoachtig
had a problem deploying
to
2v-preview
GitHub Actions
Failure
zenoachtig
had a problem deploying
to
2c-preview
GitHub Actions
Failure
zenoachtig
had a problem deploying
to
2v-preview
GitHub Actions
Failure
zenoachtig
had a problem deploying
to
2c-preview
GitHub Actions
Failure
Contributor
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
taranvohra
reviewed
Dec 2, 2025
packages/gitbook/src/components/Embeddable/EmbeddableIframeAPI.tsx
Outdated
Show resolved
Hide resolved
packages/gitbook/src/components/Embeddable/EmbeddableIframeAPI.tsx
Outdated
Show resolved
Hide resolved
packages/gitbook/src/components/Embeddable/EmbeddableIframeAPI.tsx
Outdated
Show resolved
Hide resolved
Contributor
There was a problem hiding this comment.
Pull request overview
This PR enhances the GitBook Docs Embed to support sites without an assistant by introducing a tabbed interface with "Assistant" and "Docs" tabs. The changes include a redesigned sidebar for tab navigation and custom actions, a new trademark display in the embed frame, and updated styling for better presentation in embedded contexts.
Key changes:
- Added a tabbed interface (Assistant/Docs) with automatic tab selection based on site configuration
- Introduced a sidebar layout for tabs and custom action buttons
- Renamed
buttonstoactionsin the embed configuration (with backward compatibility) - Added trademark display at the bottom of the embed frame
- Enhanced component flexibility (Button, Tooltip, Link) to support embed-specific use cases
Reviewed changes
Copilot reviewed 31 out of 32 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
packages/gitbook/src/middleware.ts |
Added new ~gitbook/embed route for the main embed entry point |
packages/gitbook/src/lib/embeddable.ts |
Added toLinkForContent to handle relative links in embed context |
packages/gitbook/src/components/primitives/Tooltip.tsx |
Exported TooltipProps type for external configuration |
packages/gitbook/src/components/primitives/Link.tsx |
Fixed navigation context to handle target="_blank" links |
packages/gitbook/src/components/primitives/Button.tsx |
Added tooltipProps support and improved icon element handling |
packages/gitbook/src/components/TableOfContents/Trademark.tsx |
Added className prop for custom styling in embed context |
packages/gitbook/src/components/TableOfContents/TableOfContents.tsx |
Added className prop for external styling |
packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx |
Updated viewport positioning calculations for container-aware layout |
packages/gitbook/src/components/Header/HeaderMobileMenu.tsx |
Converted to use Button component with active state tracking |
packages/gitbook/src/components/Embeddable/EmbeddableRootLayout.tsx |
Added trademark display and updated theme handling for embeds |
packages/gitbook/src/components/Embeddable/EmbeddableIframeAPI.tsx |
Implemented tab management, navigation logic, and actions configuration |
packages/gitbook/src/components/Embeddable/EmbeddableFrame.tsx |
Added EmbeddableFrameMain and EmbeddableFrameSidebar components |
packages/gitbook/src/components/Embeddable/EmbeddableDocsPageControlButtons.tsx |
New component for "open in new tab" button in docs view |
packages/gitbook/src/components/Embeddable/EmbeddableDocsPage.tsx |
Restructured to use new sidebar layout with tabs and actions |
packages/gitbook/src/components/Embeddable/EmbeddableAIChat.tsx |
Updated to use new sidebar layout structure |
packages/gitbook/src/components/AIChat/AIChatControlButton.tsx |
Simplified from dropdown to single clear button |
packages/gitbook/src/components/AIChat/AIChat.tsx |
Updated to use EmbeddableFrameMain wrapper |
packages/gitbook/src/components/AI/useAIChat.tsx |
Added event listener support for postMessage events |
packages/gitbook/src/components/AI/useAI.tsx |
Added size class to AI chat icon |
packages/gitbook/src/app/sites/static/[mode]/[siteURL]/[siteData]/~gitbook/embed/page.tsx |
New page that redirects to assistant or docs based on configuration |
packages/gitbook/src/app/sites/static/[mode]/[siteURL]/[siteData]/~gitbook/embed/assistant/page.tsx |
Added redirect guard for when assistant is not enabled |
packages/gitbook/src/app/sites/dynamic/[mode]/[siteURL]/[siteData]/~gitbook/embed/page.tsx |
New dynamic page with similar redirect logic |
packages/embed/src/standalone/style.css |
Added icon styles for sparkle, help, and book icons |
packages/embed/src/standalone/index.ts |
Renamed buttons to actions, added tabs configuration, and button customization |
packages/embed/src/react/GitBookFrame.tsx |
Updated to use new configuration structure with actions and greeting |
packages/embed/src/client/protocol.ts |
Renamed GitBookEmbeddableButtonDefinition to GitBookEmbeddableActionDefinition, added tabs field |
packages/embed/src/client/createGitBookFrame.ts |
Updated default configuration structure |
packages/embed/src/client/createGitBook.ts |
Changed default frame URL to use base embed path |
packages/embed/README.md |
Comprehensive documentation update with new configuration options and examples |
package.json |
Updated @gitbook/api dependency to version 0.152.0 |
bun.lock |
Updated lockfile to reflect new dependency version |
.changeset/grumpy-peas-hammer.md |
Added changeset documenting the improvements |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
packages/gitbook/src/components/Embeddable/EmbeddableIframeAPI.tsx
Outdated
Show resolved
Hide resolved
taranvohra
reviewed
Dec 2, 2025
| const chatController = useAIChatController(); | ||
|
|
||
| React.useEffect(() => { | ||
| embeddableConfiguration.setState({ baseURL, siteTitle }); |
Member
There was a problem hiding this comment.
I don't see the need to store baseURL and siteTitle in a global store when we have it on the context. Why can't we just use it from there?
Contributor
Author
There was a problem hiding this comment.
This is a client component, we don't want to send the whole context to the client so have to be selective. Unless I fundamentally misunderstand how context is supposed to work in GBO
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Tests are added in separate PR: #3830